<!--
 * @Author: H.
 * @Date: 2021-08-05 18:37:25
 * @LastEditTime: 2021-11-24 17:11:48
 * @Description: 
-->
<template>
  <h1>Dialog 示例</h1>
  <Demo :component="Dialog1Demo" />
  <Demo :component="Dialog2Demo" />
  <h2>Dialog Attributes</h2>
  <Table :dataSource="dataSource" :columns="columns" />
</template>

<script lang="ts">
import Demo from './Demo/index.vue'
import Dialog1Demo from './Demo/Dialog1.demo.vue'
import Dialog2Demo from './Demo/Dialog2.demo.vue'
import Table from '../lib/table/Table.vue'
export default {
  components: {
    Demo,
    Table,
  },
  setup() {
    const dataSource = [
      {
        id: 1,
        params: 'v-model:visible',
        illustrate: '是否显示 Dialog',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 2,
        params: 'closeOnClickOverlay',
        illustrate: '是否可以通过点击遮罩层关闭 Dialog',
        type: 'boolean',
        optional: '-',
        defaults: 'true',
      },
      {
        id: 3,
        params: 'ok',
        illustrate: '点击ok的回调',
        type: 'function',
        optional: '-',
        defaults: '-',
      },
      {
        id: 4,
        params: 'cancel',
        illustrate: '点击cancel的回调',
        type: 'function',
        optional: '-',
        defaults: '-',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return {
      Dialog1Demo,
      Dialog2Demo,
      dataSource,
      columns,
    }
  },
}
</script>
